<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>登陆</title>
    {{assets_js "/static/plugins/jquery/jquery.min.js"}}
</head>
<body>
<form action='{{urlfor "AccountController.Register"}}' method="post">
    <p>账号：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="password"></p>
    <p>确认密码：<input type="password" name="password_confirm"></p>
    <p>邮件：<input type="text" name="email"></p>
    <p>电话：<input type="text" name="mobile"></p>

    <!--验证码-->
    <div class="row" style="margin-bottom: 15px;">
        <div class="col-sm-8">
            <input type="text" id="captcha" class=" form-control" name="captcha" placeholder="验证码" maxlength="6">
        </div>

        <div class="col-sm-4" style="padding-left: 0">
            <img style="width: 100%;max-width: 120px;" src="{{.captcha.CaptchaUrl}}" alt="图形验证码" id="captchaImg"
                 height="34" onclick="refreshCaptcha()">
        </div>
        <input type="hidden" name="captchaId" id="captchaId" value="{{.captcha.CaptchaId}}">
    </div>


    <p><input type="submit" value="提交"></p>
</form>
</body>
<script>
    //刷新验证码
    function refreshCaptcha() {
        id = $("#captchaId").val();
        $.ajax({
            type: "post",
            url: "/account/refresh_captcha",
            data: {"captchaId": id, "_xsrf": $('meta[name="_xsrf"]').attr('content')},
            dataType: "json",
            success: function (result) {
                if (result.isNew) {
                    $("#captchaImg").attr('src', result.captcha.CaptchaUrl + '?t=' + (new Date()).getTime());
                    $("#captchaId").val(result.captcha.CaptchaId);
                } else {
                    $("#captchaImg").attr('src', $("#captchaImg").attr("src") + "?t=" + (new Date()).getTime());
                }
            }
        });
    }
</script>
</html>